<script lang="ts" setup>
import { computed } from 'vue';

const props = withDefaults(defineProps<{ span?: number }>(), {
	span: 2
});

const styles = computed(() => {
	return {
		gridTemplateColumns: new Array(props.span).fill('1fr').join(' ')
	};
});
</script>

<template>
	<view class="um-grid" :style="styles">
		<slot></slot>
	</view>
</template>

<style lang="scss" scoped>
.um-grid {
	display: grid;
	gap: 24rpx;
	grid-gap: 16rpx;
}
</style>
